<template>
	<view v-if="!isLoading" class="container">

    <!-- 头部背景图 -->
    <view class="dealer-bg">
		<!-- <image class="image" mode="widthFix" :src="background"></image> -->
    </view>

    <!-- 等待审核、审核结果 -->
    <view v-if="applyStatus > 0" class="dealer-boot dis-flex flex-dir-column flex-y-center">
      <view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
        <text class="msg__icon iconfont icon-shenhezhong"></text>
        <text class="msg__content m-top20 f-29 col-80">{{ words.wait_audit.value }}</text>
      </view>
      <!-- 去商城逛逛 -->
      <view class="boot__submit form-submit dis-flex flex-x-center">
        <button class="button" @click="$navTo('pages/index/index')">{{ words.goto_mall.value }}</button>
      </view>
    </view>

    <!-- 填写申请信息 -->
    <view v-else class="shenqing">
		<view class="form-title">团长申请</view>
		<view class="form-box">
			<form @submit="handleSubmit">
			<!-- <view class="form-field dis-flex flex-y-center">
				<view class="field-label">邀请人</view>
				<view class="field-input">
					<text>{{ refereeName }}（请核对）</text>
				</view>
			</view> -->
			<view class="form-field">
				<view class="field-label">姓名</view>
				<view class="field-input">
					<input name="name" placeholder="请输入真实姓名"></input>
				</view>
			</view>
			<view class="form-field">
				<view class="field-label">手机号</view>
				<view class="field-input">
					<input name="mobile" placeholder="请输入手机号"></input>
				</view>
			</view>
			<!-- 申请协议 -->
			<view class="form-license">
				<image @click="privacyChange" v-if="isCheck" src="@/static/radio@selected.png"></image>
				<image @click="privacyChange" v-else src="@/static/radio.png"></image>
				<text class="txt1">勾选代表同意</text>
				<text @click="handleShowLicense(3)" class="txt1">《申请协议》</text>
			</view>
			<!-- 立即申请 -->
			<view class="form-submit">
				<button formType="submit">立即申请</button>
			</view>
			</form>
		</view>
    </view>

    <!-- 入驻协议弹窗 -->
    <u-modal v-model="showLicense" title="申请协议">
      <scroll-view class="pops-content" :scroll-y="true">
        <text>{{ license }}</text>
      </scroll-view>
    </u-modal>

	</view>
</template>

<script>
	
	import { Dealer } from '@/utils/model/dealer-model.js';
	var dealer = new Dealer();
export default {
    data() {
		return {
			// 正在加载
			isLoading: true,
			// 当前是否为分销商
			isDealer: undefined,
			// 当前是否在申请中
			applyStatus: -1,
			isCheck: false
		}
    },

    onLoad(options) {
      //this.getSetting()
      this.getApplyStatus()
    },

    methods: {
		handleShowLicense(id){
			uni.navigateTo({
				url: '/pages/agreement/index?id='+id
			})
		},
		privacyChange(){
			this.isCheck = !this.isCheck
		},
		// 获取分销设置
		getSetting() {
			const app = this
			SettingModel.data()
			  .then(setting => {
				// 赋值属性
				app.words = setting.words.apply.words
				app.background = setting.background.apply
				app.license = setting.license.license
				// 设置当前页面标题
				app.setPageTitle(setting.words.apply.title)
			  })
		},

		// 分销商申请状态
		getApplyStatus() {
			const app = this
			app.isLoading = true
			dealer.getStatus().then(res => {
				if(res.code == 1){
					this.applyStatus = res.data.applyStatus 
				}
			}).catch(err => {
				console.log(err)
			}).finally(() => app.isLoading = false)
		},

		// 表单提交
		handleSubmit({ detail }) {
			console.log(detail)
			const app = this
			// 表单验证
			if (!app.onValidation(detail.value)) {
				return false
			}
			var name = detail.value.name
			var mobile = detail.value.mobile
			// 确认提交
			dealer.apply(name, mobile).then(result => {
				uni.showToast({
					title: result.msg
				})
				
				setTimeout(() => uni.navigateBack(), 1200)
			})
		},

		// 表单验证
		onValidation(data) {
			const app = this
			// 验证可提现佣金
			if (!data.name) {
				uni.showModal({
				  title: '友情提示',
				  content: '请填写姓名',
				  showCancel: false
				})
				return false
			}
			// 验证手机号
			if (!/^\+?\d[\d -]{8,12}\d/.test(data.mobile)) {
				uni.showModal({
				  title: '友情提示',
				  content: '手机号格式不正确',
				  showCancel: false
				})
				return false
			}
			// 验证是否阅读协议
			if (!app.isCheck) {
				uni.showModal({
				  title: '友情提示',
				  content: '请先阅读分销商申请协议',
				  showCancel: false
				})
				return false
			}
			return true
		},

	}
}
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style scoped lang="scss">
	@import '~@/pages/dealer/apply.scss';
</style>
